import React, { Component } from 'react'
import { Card,Form, Select, Button,Row,Input,DatePicker,Modal,Table,message  } from 'antd';
import moment from 'moment';
const { Option } = Select;

export default class Merchantadd extends Component {
  constructor(props){
    super(props);
    this.state = {
      selectedRows:[],
      dataSource: [{
        carId: '001',
        city: '重庆',
        address: '就是在那个卡卡',
        createTiem: '2019-01-22'
      }, {
        carId: '002',
        city: '绵阳',
        address: '就是在哪里',
        createTiem: '2019-01-23'
      },
      {
        carId: '003',
        city: '成都',
        address: '就是在那个卡卡',
        createTiem: '2019-01-24'
      }
    ],
    columns:[{
      title: '编号',
      dataIndex: 'carId',
      key: 'carId',
    }, {
      title: '城市',
      dataIndex: 'city',
      key: 'city',
    }, {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '创建时间',
      dataIndex: 'createTiem',
      key: 'createTiem',
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 120,
    render: (record,index) => {
      return <div className="butTable">
            <Button size="small" type='primary' onClick={()=>this.onPrimary(record)}>修改</Button>
            <Button  size="small" type='' onClick={()=>this.onDatails(record,index)}>详情</Button>
            <Button  size="small" type='danger' onClick={()=>this.onDel(record,index)}>删除</Button>
          </div>
      },
    }
  ]
    }
  }
  
onPrimary = (record)=>{
  console.log(record);
  
}
onDatails = (record,index) =>{
  console.log(record);
  console.log(index);
}

onDel = (record,index) =>{
  console.log(record);
  console.log(index);
}
onMoveDel = ()=>{
  let newArr=[];
  if(this.state.selectedRows.length>0){
    newArr = this.state.dataSource.filter(item => !this.state.selectedRows.includes(item) )
}else{
  message.warning('请先勾选要删除的对象');
  return false
}
  this.setState({
    dataSource:newArr
  },()=>{
    console.log("setState回调",this.state.dataSource);
    message.success('删除成功！');
  })

  console.log("立即执行",this.state.dataSource)
}
  render() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        this.setState({
          selectedRows:[...selectedRows]
        })
      },
      getCheckboxProps: record => ({
        disabled: record.city === '成都', // Column configuration not to be checked
      }),
    };
    return (
      <div>
        <Card>
          <WrappedForm/>
        </Card>
        <Card style={{marginTop:16}}>
           <Row>
              <Button type="primary">添加渠道</Button>
              <Button type="danger" style={{marginLeft:16}}  onClick={()=> this.onMoveDel()}>批量删除</Button>
           </Row>
           <Row>
              <Table rowSelection={rowSelection} size="small" rowKey='carId' style={{marginTop:'16px'}} dataSource={this.state.dataSource} columns={this.state.columns} />
              {/* <Pagination size="small" total={50} showSizeChanger showQuickJumper /> */}
           </Row>
        </Card>
      </div>
    )
  }
}

class FilterForm extends Component {
  handleSubmit = () =>{
    let subimtInfo = this.props.form.getFieldsValue();
    console.log(subimtInfo);
    if(subimtInfo) {
      if(subimtInfo.startDate){
        subimtInfo.startDate = moment(subimtInfo.startDate._d).format('YYYY-MM-DD');
      }
      if(subimtInfo.endDate){
        subimtInfo.endDate = moment(subimtInfo.endDate._d).format('YYYY-MM-DD');
      }
      Modal.success({
        title: '提交成功！',
        content:`城市${subimtInfo.cityNO},请输入${subimtInfo.userName},开始时间${subimtInfo.startDate},结束时间${subimtInfo.endDate},`
      })
    }
  }
  componentWillMount(){
  }
  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form layout='inline'>
          <Form.Item label='城市'  >
              {
                getFieldDecorator('cityNO')(
                  <Select placeholder='请选择城市' style={{width:180}}>
                      <Option value="1">北京</Option>
                      <Option value="2">成都</Option>
                      <Option value="3">重庆</Option>
                  </Select>
                )
              }
          </Form.Item>
          <Form.Item label='请输入' >
              {
                getFieldDecorator('userName',
                {
                  initialValue:''
                }
              )(
                  <Input placeholder='请输入'/>
                )
              }
          </Form.Item>
          
          <Form.Item label='起止日期' >
                <Form.Item>
                  { 
                    getFieldDecorator('startDate',
                    {
                      initialValue:''
                    }
                  )(
                      <DatePicker 
                        placeholder="开始时间" 
                        format="YYYY-MM-DD"
                      ></DatePicker>
                    )
                  }
                </Form.Item>
                  <span style={{marginRight:16}}>~</span>
                <Form.Item>
                { 
                    getFieldDecorator('endDate',
                    {
                      initialValue:''
                    }
                  )(
                      <DatePicker placeholder="结束时间"></DatePicker>
                    )
                  }
                 
                </Form.Item>

          </Form.Item>

          <Form.Item>
              <Button  type='primary'  onClick={this.handleSubmit}>查询</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

const  WrappedForm = Form.create()(FilterForm);